import React, { useState } from 'react';
import './source_material.css';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import ImageGroup2 from './ImageGroup2';
import Shape from './shape';
import Line from './line';

// 导入本地图片资源，用于展示在推荐素材Tab中
import aa from "../../assets/simg/1.png";
import bb from "../../assets/simg/2.png";
import cc from "../../assets/simg/3.png";
import dd from "../../assets/simg/4.png";
import ee from "../../assets/simg/5.png";
import ff from "../../assets/simg/6.png";
import gg from "../../assets/simg/7.png";
import hh from "../../assets/simg/8.png";
import ii from "../../assets/simg/9.png";
import jj from "../../assets/simg/10.png";
import qq from "../../assets/simg/11.png";
import kk from "../../assets/simg/12.png";

const SourceMaterial: React.FC = () => {
      // useState钩子，用于管理当前激活的Tab的key
    const [activeKey, setActiveKey] = useState<string>('1');
      // useState钩子，用于管理当前展示的视图类型（例如，默认图片组、形状、线条、箭头等）。
    const [view, setView] = useState<string>('default');


    // Tab切换时的回调函数，当Tab切换时，更新activeKey并重置视图类型为默认。
    const onChange = (key: string) => {
        setActiveKey(key);
        setView('default');
    };

     // 当用户点击不同的按钮时，根据按钮类型更新视图类型。
    const handleButtonClick = (type: string) => {
        setView(type);
    };

 // 创建图片组数据，用于在推荐素材Tab中展示
    const imageGroups = [
        { title: "节日元素", images: [aa, bb, cc] },
        { title: "漂浮元素", images: [dd, ee, ff] },
        { title: "边框纹理", images: [gg, hh, ii] },
        { title: "产品实拍", images: [jj, qq, kk] },
    ];
//items是一个数组，包含了Tab的配置项，每个配置项定义了一个Tab的key、label和children（即Tab的内容）。
    const items: TabsProps['items'] = [
        {
            key: '1',// Tab的唯一标识
            label: '推荐素材', // Tab显示的标题
            children: (// Tab对应的内容
                <div className='Imgs'>
                    <div className='btns'>
                        <button onClick={() => handleButtonClick('shapes')}>形状</button>
                        <button onClick={() => handleButtonClick('lines')}>线条</button>
                        <button onClick={() => handleButtonClick('arrows')}>箭头</button>
                    </div>
                    {view === 'default' && (
                        imageGroups.map((group, index) => (
                            <ImageGroup2 key={index} title={group.title} images={group.images} />
                        ))
                    )}
                    {view === 'shapes' && (
                        <div>
                          
                            <b onClick={() => setView('default')}>
                                {/* 返回按钮 */}
                                <i className='iconfont icon-xiangzuojiantou'></i>形状
                            </b>
                            <Shape></Shape> {/* 形状相关内容 */}

                        </div>
                    )}
                    {view === 'lines' && (
                        <div>
                           
                              <b onClick={() => setView('default')}>
                                {/* 返回按钮 */}
                                <i className='iconfont icon-xiangzuojiantou'></i>线条
                            </b>
                            {/* 线条相关内容 */}
                            <Line></Line>
                        </div>
                    )}
                    {view === 'arrows' && (
                        <div>
                          
                              <b onClick={() => setView('default')}>
                                {/* 返回按钮 */}
                                <i className='iconfont icon-xiangzuojiantou'></i>箭头
                            </b>
                            {/* 箭头相关内容 */}
                        </div>
                    )}
                </div>
            ),
        },
        {
            key: '2',
            label: '最近使用',
            children: <div>Content of Tab Pane 2</div>,
        },
        {
            key: '3',
            label: '收藏',
            children: <div>Content of Tab Pane 3</div>,
        },
    ];

    return (
        <div>
            <div className='Left_search'>
                <i className='iconfont icon-Magnifier'></i>
                <input type="text" placeholder='搜索图片' />
            </div>
          {/* 使用Ant Design的Tabs组件来实现Tab切换功能，并通过items属性传入Tab的配置项实现Tab切换功能 */}
            <Tabs
                defaultActiveKey="1"// 默认激活的Tab
                items={items} // Tab的配置项
                activeKey={activeKey}// 当前激活的Tab的key
                onChange={onChange}// Tab切换时的回调函数
                className='Left_tabs'
            />
        </div>
    );
}

export default SourceMaterial;
